<template>
  <div>
    <!-- 按钮 -->
    <el-button class="btn" icon="el-icon-plus" size="mini" type="primary" @click="showDialog">添加品牌</el-button>
    <!--
      表格组件
      data:表格组件将来需要展示的数据 ------ 数组类型
      prop:对应列内容的字段名
      border:是给表格添加边框
      column 属性
      label:显示标题
      width:对应列的宽度
      align:标题的对齐方式
      注意1: elementUi当中的table组件,展示的数据是以一列一列进行展示数据
      -->
    <el-table border :data="list">
      <el-table-column type="index" align="center" label="序号" width="80" />
      <el-table-column prop="tmName" align="center" label="品牌名称" width="180" />
      <el-table-column align="center" label="品牌LOGO">
        <template slot-scope="scope">
          <img :src="scope.row.logoUrl" class="imgs" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateTradeMark(row)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--
      分页器
      当前第几页、数据总条数、每一页展示条数、连续页码数
      total: 代表分页器一共需要展示数据条数
      page-size: 代表的是每一页需要展示多少条数据
      page-sizes: 代表每页显示个数选择器的选项设置 [10,20,50]
      layout: 可以实现分页器布局  -> 没有 -<
      pager-count: 按钮的数量 如果 9 连续页码是 7 第一页 最后一页各占1
      @current-change : 点击 ? 页时候,得到 ? 页的值
      @size-change : 一页显示多少条数据
      -->
    <el-pagination background layout="prev, pager,next,jumper,->,total,sizes" :total="total" :page-size="limit" :current-page="page" :page-sizes="[3, 5, 10]" :pager-count="7" @current-change="getPageList" @size-change="sizeChange" />
    <!-- dialog对话框 -->
    <el-dialog :title="this.tmForm.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogFormVisible">
      <!-- form表单:model属性,这个属性的作用是,把表单的数据收集到那个对象上,将来表单验证,也需要这个属性 -->
      <el-form ref="myform" :rules="rules" :model="tmForm" style="width: 80%">
        <el-form-item label="品牌名称" label-width="120px" prop="tmName">
          <el-input
            v-model="tmForm.tmName"
            autocomplete="
          off"
          />
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="120px" prop="logoUrl">
          <!--
             这里收集数据:不能使用v-model,因为不是表单元素
              action:设置图片上传的地址
              :on-success : 可以检测到图片上传成功,当图片上传成功,会执行一次
              :before-upload : 可以在上传图片之前,会执行一次
          -->
          <el-upload class="avatar-uploader" :show-file-list="false" action="dev-api/admin/product/fileUpload" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrupdateTrademark">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TradeMark',
  data() {
    // 自定义规则校验
    // rule : 检验value的相应属性
    // value : 用户输入的值
    // callback : 放行
    const validateTmName = (rule, value, callback) => {
      if (value.length < 2 || value.length > 10) {
        callback(new Error('品牌名称2-10位'))
      } else {
        callback()
      }
    }
    return {
      // 请求第几页的数据,默认第一页
      page: 1,
      // 一页请求多少条数据
      limit: 5,
      // 总共数据条数
      total: 0,
      // 列表展示的数据
      list: [],
      // Diolog展示的属性
      dialogFormVisible: false,
      // 上传图片要用到的属性
      imageUrl: '',
      // 收集表单数据对象
      tmForm: {
        tmName: '',
        logoUrl: '',
      },
      // 表单校验规则对象
      rules: {
        // 品牌名称的验证规则
        // require:必须要校验字段, message 提示信息 trigger:用户行为设置(事件的设置:blur、change)
        // tmName: [
        // { required: true, message: '请输入品牌名称', trigger: 'blur' },
        // 品牌名称长度
        // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
        // ],
        // 自定义校验规则
        tmName: [{ validator: validateTmName, trigger: 'change' }],
        // 品牌的logo验证规则
        logoUrl: [{ required: true, message: '请选择图片' }],
      },
    }
  },
  mounted() {
    this.getPageList()
  },
  methods: {
    // 获取品牌列表的数据
    async getPageList(pager = 1) {
      // 跟@current-change事件共用一个函数,先设定一个参数默认等于1,是第一次请求这个方法时候的备用,
      // 有则赋值无则默认请求第一页数据
      // @current-change方法会返回一个参数,点击哪页返回哪页的参数
      console.log(pager, 'pager')
      this.page = pager
      // 结构出函数,不结构用this.xx 也可以
      const { page, limit } = this
      // 获取品牌列表的接口
      // 当你向服务器发请求的时候,这个函数需要带参数,先在data中定义好动态变量
      const res = await this.$api.trademark.reqtrademark(page, limit)
      // console.log(res)
      if (res.code === 200) {
        this.total = res.data.total
        this.list = res.data.records
      }
    },
    // 点击 ? 页 获取第 ? 页的数据,但是只是修改了某一个值,可以共用上面方法
    // currentChange(pager) {
    //   console.log(pager)
    //   this.page = pager
    //   this.getPageList()
    // },
    // 一页展示多少条数据的回调方法
    sizeChange(limits) {
      // 默认返回一个参数,接收
      // console.log(limits)
      // 重新赋值 + 发请求
      this.limit = limits
      this.getPageList()
    },
    // 展示对话框回调
    showDialog() {
      // 每次点击添加品牌时都清除一遍对象内的残留数据
      this.tmForm.tmName = ''
      this.tmForm.logoUrl = ''
      this.dialogFormVisible = true
    },
    // 修改品牌按钮回调事件
    updateTradeMark(row) {
      // 显示对话框
      this.dialogFormVisible = true
      // console.log(row)
      // 将已有的品牌信息赋值给 tmForm 进行展示
      // 将服务器返回的品牌信息,直接赋值给了 tmForm 进行展示
      //  也就是 tmForm 存储即为服务器返回品牌信息
      // this.tmForm = row 但是这样会有弊端,等于直接操作了展示的数据
      // 所以需要浅拷贝一份服务器返回的对象,而非获取到服务器的对象
      // 我理解为对象简单类型的深拷贝,对象地址的浅拷贝
      this.tmForm = { ...row }
    },
    // 上传图片成功的回调
    handleAvatarSuccess(res, file) {
      // res : 上传成功之后返回前端数据
      // file : 上传成功之后服务器返回前端数据
      // 二者大概相同
      // console.log(res, 'res')
      this.tmForm.logoUrl = res.data
    },
    // 校验图片格式回调
    beforeAvatarUpload(file) {
      // console.log(file)
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 点击确定时(添加|修改商品)
    addOrupdateTrademark() {
      // console.log(Boolean(this.tmForm.id))
      // 当全部验证字段通过,再去书写业务
      this.$refs.myform.validate(async (success) => {
        console.log(success)
        // 如果全部字段符合条件
        if (success) {
          this.dialogFormVisible = false
          // 发请求 添加 | 修改
          const res = await this.$api.trademark.reqAddOrUpdate(this.tmForm)
          console.log(res, 'res')
          if (res.code == 200) {
            // 弹出信息:添加 or 修改成功
            this.$message({
              type: 'success',
              message: this.tmForm.id ? '修改成功' : '添加成功',
            })
            // 添加或者修改品牌成功后,需要再次获取品牌列表进行展示
            // 如果添加品牌,停留在第一页,修改品牌应该留在当前页
            this.getPageList(this.tmForm.id ? this.page : 1)
          }
        } else {
          this.$message({
            type: 'error',
            message: '请填写必填项',
          })
          return false
        }
      })
    },
    // 删除商品
    remove(row) {
      this.$confirm(`此操作将永久${row.tmName}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async (res) => {
          // 点击确定时执行
          console.log(res)
          const result = await this.$api.trademark.reqRemoveById(row.id)
          console.log(result)
          if (result.code == 200) {
            this.getPageList(this.list.length > 1 ? this.page : this.page - 1)
          }
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch((err) => {
          // 点击取消时执行
          console.log(err)
          this.$message({
            type: 'warning',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style scoped>
.imgs {
  width: 50px;
  height: 50px;
}
.btn {
  margin-bottom: 20px;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
